<template>
	<app-layout>
		<!-- 10.26 弹窗 珠宝店价格 -->
		<!-- <movable-area class="movable" :style="{height: `calc(100% - ${BotHeight}rpx)`}">
			<movable-view @click="jump('/pages/store/transfer/transfer')" class="movable-item" direction="all" x="750"
				y="420" :inertia="true">
				<image :lazy-load="true" class="quick" mode="widthFix"
					:src="imgprefix + '/web/uploads/tasklist/valueflo.jpg?time=' + time"></image>
			</movable-view>
		</movable-area> -->
		<movable-area class="movable" :style="{height: `calc(100% - ${BotHeight}rpx)`}">
			<movable-view @click="jump('/pages/store/transfer/transfer')" class="movable-item" direction="all" x="750"
				y="962rpx" :inertia="true">
				<!-- y=420 -->
				<image :lazy-load="true" class="quick" mode="widthFix"
					:src="imgprefix + '/web/uploads/tasklist/valueflo.jpg?time=' + time"></image>
			</movable-view>
		</movable-area>
		<block v-if="status == 1">
			<view class="user-shop"
				:style="{'background-image': 'url('+imgprefix+'/web/uploads/mall1/20210617/shopbg.jpg);'}">
				<view class="grade">
					<image :src="imgprefix+'/web/uploads/grade/gold.png'" mode="" class="gimage"></image>
					<view class="gtitle">
						金牌店
						<text class="gcon">
							（店的级别显示上个月的业绩）
						</text>
					</view>
				</view>
				<view class="user-info" v-if="status == 1">
					<image class="avatar" load-lazy="true" :src="storeuser.userInfo.avatar"></image>
					<view class="nickname">
						<view class="nick-nick u-line-1">
							<!-- {{vid?storename:'我的珠宝店'}} -->{{storettile ?storettile:stname+'的珠宝店'}}
							<!-- {{vid?storename+'的珠宝店':stname+'的珠宝店'}} -->
						</view>
						<view class="nick-shop u-line-2">{{description ? description : storeuser.nickname}}</view>
					</view>
					<view class="complaint" @click="nljump">
						<image src="/static/image/index/complaint.png"></image>
						有奖投诉
					</view>
				</view>
				<!-- 9.28 加入特别说明 可能修改 -->
				<view class="spe-note">
					特别说明：拼团频道商品为双熙堂品牌特惠不计入佣金范围
				</view>
				<view class="sxt-intro">
					百年品牌双熙堂：源自<text style="font-weight: bold;">1865</text>年皇家翡翠工匠
				</view>
				<!-- 连续无收入的公告 -->
				<!-- <view class="" v-if="latedown && vid == userInfo.vdian_id">
					<u-announcement :name="namedown" :content="contentdown" bgColor="rgba(0,0,0,0.2)" text-color="#fff">
					</u-announcement>
				</view> -->
			</view>
			<!-- 搜索 -->
			<view class="page-width">
				<app-search-for :value="value"></app-search-for>
			</view>
			<!-- 导航1 -->
			<!-- 176-20 -->
			<view class="">
				<app-navigation-icon v-if="pageList[2]" navHeight="156" navMargin="20rpx auto" iconRadius="50%"
					:navs="pageList[2].subnav" background="#f7f7f7" :scroll="true" columns="5" :rows="2">
				</app-navigation-icon>
			</view>

			<!-- 导航2 20220124注释 -->
			<!-- 176-28 -->
			<!-- <view class="">
				<app-navigation-icon v-if="pageList[4]" navHeight="148" navMargin="20rpx auto"
					:navs="pageList[4].subnav" background="#f7f7f7" :scroll="true" :columns="5" :rows="1">
				</app-navigation-icon>
			</view> -->

			<!-- banner -->

			<view v-if="pageList[5].subnav" style="width: 686rpx;margin: 20rpx auto 32rpx;border-radius: 32rpx;">
				<app-swiper :list="pageList[5].subnav" borderRadius="32" mode="rect" name="icon_url" :height="242"
					:autoplay="false">
				</app-swiper>
			</view>

			<!-- 图片魔方 -->
			<view class='activity'>
				<view class='assemble' v-if="pageList[6]">
					<app-jump-button class="swiper" form :url="pageList[6].subnav[0].url">
						<image :src="pageList[6].subnav[0].icon_url" class="slide-image" />
					</app-jump-button>
				</view>
				<view class='listR' v-if="pageList[89]">
					<view class="listRt" v-for="(items,indexs) in pageList[89].subnav" :key="indexs"
						@click="isvideo(indexs)">
						<image :src="items.icon_url" class="slide-image" />
						<image :src="imgprefix+'/web/uploads/mall1/20210331/50af8c15686da2c9044ce0769d010b3f.png'"
							mode="" class="subject-play"></image>
					</view>
				</view>
			</view>
			<video v-if="isvshow" :autoplay="true" :loop="true" :src="videolist[curindex].vdetail[0].url"
				style="position: fixed;top: 0;left: 0;width: 100%;height: 460rpx;z-index: 1600;" controls></video>
			<view class="close" @click="closev" v-if="isvshow">
				<image class="image" src="../../../static/image/icon/video-close.png"></image>
			</view>

			<!-- 成为双熙堂合伙人 -->
			<view class='partner' v-if="pageList[9]">
				<app-jump-button form :open_type="pageList[9].open_type" :url="pageList[9].url">
					<image :src="pageList[9].icon_url" class="image" mode="widthFix" />
				</app-jump-button>
			</view>

			<!-- 实体店直播，好货快快抢 -->
			<view class="beseparate" v-if="pageList[10]">
				<app-jump-button class="besebutton" v-for="(item,idx) in pageList[10].subnav" :key="idx" form
					open_type="redirect" :url="item.url">
					<view class="besepone">
						<image class="image" :src="item.icon_url" mode=""></image>
					</view>
				</app-jump-button>
			</view>
			<!-- 今日推荐 -->
			<!-- <view class="today" v-if="pageList[54]" @click="jump(pageList[54].url)">
				<view class="icon" style="box-sizing: content-box;">
					<image class="image" :src="pageList[54].icon_url"></image>
				</view>
				<view class="text">
					<view class="title">
						{{pageList[54].name}}
					</view>
					<view class="dec">
						{{pageList[54].params.describe}}
					</view>
				</view>
			</view> -->
			<view class="today" v-if="pageList[54]" @click="jump(pageList[54].url)">
				<image :lazy-load="true" :src="pageList[54].icon_url" class="image" mode="widthFix" />
			</view>
			<!-- 今日爆款，猜你喜欢 -->
			<!-- <view class="bepartner" v-if="pageList[59].subnav.length > 0">
				<view class="bepartnerone" v-for="(item,index) in pageList[59].subnav" :key="index"
					@click="jump(item.url)">
					<view class="image">
						<image class="img" :src="item.icon_url">
						</image>
					</view>
					<view class="title u-line-1">
						{{item.name}}
						<view style="float: right;">点击进入>>></view>
					</view>
				</view>
			</view> -->
			<view class="bepartner" v-if="pageList[59].subnav.length > 0 && pageList[61].subnav.length > 0">
				<view class="bepartnerone" @click="jump(pageList[59].url)" v-if="pageList[59].subnav.length > 0">
					<swiper class="swiper" :autoplay="true" :interval="3000" :duration="500" :circular="true"
						:disable-touch="true">
						<swiper-item v-for="(item,index) in pageList[59].subnav" :key="index">
							<view class="image">
								<image class="img" :lazy-load="true" :src="item.icon_url" mode=""></image>
							</view>
						</swiper-item>
					</swiper>
					<view class="title u-line-1">
						{{pageList[59].name}}
						<view style="float: right;">点击进入>>></view>
					</view>
				</view>
				<view class="bepartnerone" @click="jump(pageList[61].url)" v-if="pageList[61].subnav.length > 0">
					<swiper class="swiper" :autoplay="true" :interval="3000" :duration="500" :circular="true"
						:disable-touch="true">
						<swiper-item v-for="(item,index) in pageList[61].subnav" :key="index">
							<view class="image">
								<image class="img" :lazy-load="true" :src="item.icon_url" mode=""></image>
							</view>
						</swiper-item>
					</swiper>
					<view class="title u-line-1">
						{{pageList[61].name}}
						<view style="float: right;">点击进入>>></view>
					</view>
				</view>
			</view>
			<!-- 列表循环 -->
			<view class="">
				<u-indexware :value="blendList"></u-indexware>
			</view>

			<!-- 返回顶部 -->
			<view class="quick-box dir-top-nowrap" style="bottom: 180rpx" v-if="opacity == 1">
				<image @click="backTop" class="quick-btn" src="../../../static/image/icon/back-top.png"></image>
			</view>
			<view class="" v-if="vid == userInfo.vdian_id">
				<tastlist flotop="360rpx" floleft="0" ref="task"></tastlist>
			</view>
		</block>
	</app-layout>
</template>

<script>
	import {
		mapGetters,
		mapState,
		mapMutations
	} from 'vuex';

	import appSearchFor from '../../../components/page-component/app-search-for/app-search-for.vue';
	import appSwiper from '../../../components/page-component/app-swiper/app-swiper.vue';
	import appNavigationIcon from '../../../components/page-component/app-navigation-icon/app-navigation-icon.vue';
	import uAnnouncement from '../../../components/page-component/u-announcement/u-announcement.vue';
	import uIndexware from '../../../components/page-component/u-goods-list/u-indexware.vue';

	import tastlist from '../../../pages/tasklist/tasklist.vue'

	export default {
		name: "shop",
		components: {
			appSearchFor,
			appSwiper,
			appNavigationIcon,
			uAnnouncement,
			uIndexware,
			tastlist
		},
		computed: {
			// 返回顶部
			showBackTop() {
				// 由于scrollTop为页面的滚动距离，默认为px单位，这里将用于传入的top(rpx)值
				// 转为px用于比较，如果滚动条到顶的距离大于设定的距离，就显示返回顶部的按钮
				return this.scrollTop > uni.upx2px(this.top);
			},
			isLogin() {
				return this.$user.isLogin();
			},
			isGuest() {
				return this.$store.state.user.accessToken === '' || this.$store.state.user.accessToken === null;
			},
			...mapState({
				userInfo: state => state.user.info,
				appSetting: state => state.mallConfig.mall.setting
			}),
			...mapGetters('mallConfig', {
				getTheme: 'getTheme',
			}),
			...mapGetters('iPhoneX', {
				BotHeight: 'getBotHeight',
			}),
			themeObject: function() {
				return {
					back: this.getTheme + '-m-back ' + this.getTheme,
					theme: this.getTheme,
					color: this.getTheme + '-m-text ' + this.getTheme,
					sBack: this.getTheme + '-s-back ' + this.getTheme
				}
			},
		},
		data() {
			return {
				value: {
					background: `#f7f7f7`,
					color: '#f7f7f7',
					placeholder: '搜索',
					radius: 28,
					textColor: '#c0c0c0',
					textPosition: `center`,
					shadow: `0 16rpx 32rpx rgba(0, 0, 0, 0.1);`
				},
				pageList: [],
				// 总页数
				page_count: 1,
				total_count: 1,
				page: 1,
				limit: 5,
				blendList: [],
				boxHeight: [],
				beHeight: '',

				mch_id: -1,
				sort: 1,
				cat_id: 0,
				sort_type: 0,
				load: false,
				is_service: 0,

				detail: null,
				mch_setting: null,

				goods_list: [],

				videolist: [],
				vtotop: 0,
				isvshow: false,
				curindex: 0,
				// 判断是否申请珠宝店
				is_apply: false,
				islate: 0,
				latedown: false,
				namedown: '',
				contentdown: '',
				subsuc: false,
				undreview: false,
				failed: false,
				status: 0,
				store_info: '',
				vid: '',
				// 9.22 添加分享当前页面为 vfid
				vfid: '',
				storename: '',
				stname: '',
				username: '',
				useravatar: '',
				storemch: 0,
				imgprefix: this.$siteInfo.imgroot,
				// 10.26
				time: new Date().getTime(),
				description: '',
				// 返回顶部
				top: 400,
				scrollTop: 0,
				opacity: 0,
				storeuser: '',
				storettile: ''
			}
		},
		onShow: function() {
			if (this.vtotop == 0) {
				uni.createSelectorQuery().select('.activity').boundingClientRect((res) => {
					if (res && res.top > 0) {
						var navbarInitTop = parseInt(res.top);
						this.vtotop = navbarInitTop
					}
				}).exec();
			}
			// console.log(this.vid,this.userInfo.vdian_id,this.vid == this.userInfo.vdian_id);
			if (this.isLogin) {
				// console.log(this.vid, this.userInfo.vdian_id, this.vid == this.userInfo.vdian_id);
				if (this.vid != undefined || this.vid != null) {
					if (this.vid != '') {
						// 9.14 注释
						// this.$storage.setStorageSync('sharestoreid', this.vid)
						// 9.14 修改
						// this.$storage.setStorageSync('jewelstoreid', this.vid)
						// 9.22 修改 分享时 无sharestoreid 存sharestoreid 有则存jewelstoreid
						// let sharestoreid = this.$storage.getStorageSync('sharestoreid')
						// if (sharestoreid) {
						// 	this.$storage.setStorageSync('jewelstoreid', this.vid)
						// } else {
						// 	this.$storage.setStorageSync('sharestoreid', this.vid)
						// }
						// console.log(this.vid, this.userInfo.vdian_id, this.vid == this.userInfo.vdian_id);
						if (this.vid == this.userInfo.vdian_id) {
							this.judgeApply(this.vid)
							// if (this.status == 1) {
							// 	this.navsReq()
							// 	this.loadlist()
							// 	this.request()
							// }
							// 9.27 调用父组件的方法 免费得金币
							if (this.$refs.task.show || this.$refs.task.isshow) {
								// 9.29 将showMo方法改为judgetask
								this.$refs.task.judgetask()
							}
						} else {
							this.status = 1
							this.navsReq()
							this.loadlist()
							this.request()
							this.stodetail(this.vid)
						}
					}
				} else if (this.vfid != undefined || this.vfid != null) { // 9.22 分享拿到的 id 本地存储
					if (this.vfid != '') {
						let sharestoreid = this.$storage.getStorageSync('sharestoreid')
						this.$storage.setStorageSync('sharestoreid', this.vfid)
						this.status = 1
						this.navsReq()
						this.loadlist()
						this.request()
						this.stodetail(this.vfid)
					}
				} else {
					uni.redirectTo({
						url: '/pages/bepartner/apply/apply'
					})
				}
			} else {
				uni.redirectTo({
					url: '/pages/user-center/user-center'
				})
				this.$store.dispatch('user/accessToken');
			}
		},
		onUnload() {
			let jewelstoreid = this.$storage.getStorageSync('jewelstoreid')
			if (jewelstoreid) {
				this.$storage.removeStorageSync('jewelstoreid')
			}
			// 9.29 离开页面改变 弹窗显示状态
			getApp().globalData.firstapplet = false
		},
		/* onReady() {
			if (this.vid != undefined || this.vid != null) {
			if (this.vid != '') {
			uni.setNavigationBarTitle({
				title: this.storettile
			})
			}
			}
		}, */
		onLoad: function(options) {
			// this.imgprefix = this.$siteInfo.imgroot

			if (options.vid != undefined || options.vid != null) {
				if (options.vid != '') {
					this.status = 1
					this.vid = options.vid
					// this.navsReq()
					// this.loadlist()
					// return;
				} else {
					this.vid = this.userInfo.vdian_id
				}
			} else {
				this.vid = this.userInfo.vdian_id
			}
			// 9.22 分享拿到的id
			if (options.vfid != undefined || options.vfid != null) {
				if (options.vfid != '') {
					this.status = 1
					this.vfid = options.vfid
					// this.navsReq()
					// this.loadlist()
					// return;
				} else {
					this.vfid = this.userInfo.vdian_id
				}
			} else {
				this.vfid = this.userInfo.vdian_id
			}

			/* if (this.isLogin) {
				// this.judgeApply(this.userInfo.vdian_id)
				this.navsReq()
				this.loadlist()
				this.request()
			} else {
				uni.redirectTo({
					url: '/pages/user-center/user-center'
				})
				this.$store.dispatch('user/accessToken');
			} */

			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
			// uni.getShareInfo()
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			return this.$shareAppMessage({
				title: this.store_info.name + '的珠宝店',
				path: '/pages/store/mine/mine',
				params: {
					// 9.22
					// vid: this.userInfo.vdian_id,
					vfid: this.userInfo.vdian_id,
					storename: this.store_info.name,
					username: this.userInfo.nickname,
					useravatar: this.userInfo.avatar,
				}
			});
			/* return {
				title: '珠宝店' + this.store_info.name,
				path: '/pages/store/mine/mine?vid=' + this.userInfo.vdian_id + '&storename=' + this.store_info.name + '&username=' + this.userInfo.nickname + '&useravatar=' + this.userInfo.avatar,
				params: {
					vid: this.userInfo.vdian_id,
					storeinfo: this.store_info
				}
			} */
		},
		onShareTimeline: function() {
			return this.$shareTimeline({
				title: this.store_info.name + '的珠宝店',
				// path: '/pages/store/mine/mine?vid=' + this.userInfo.vdian_id + '&storename=' + this.store_info.name + '&username=' + this.userInfo.nickname + '&useravatar=' + this.userInfo.avatar,
				query: {
					// 9.22 区分点击和分享
					// vid: this.userInfo.vdian_id,
					vfid: this.userInfo.vdian_id,
					storename: this.store_info.name,
					username: this.userInfo.nickname,
					useravatar: this.userInfo.avatar,
				}
			});
		},
		onReachBottom() {
			// console.log(this.page , this.limit ,this.page_count);
			// 循环
			if (this.page < this.page_count) {
				this.page++;
				this.request();
			} else {
				// this.page = 1
				let indexloop = this.$storage.getStorageSync('indexLoop');
				if (indexloop) {
					this.blendList = this.blendList.concat(indexloop)
				} else {
					this.request()
				}
			}
		},
		// mounted() {
		// 	this.navsReq()
		// },
		watch: {
			// 返回顶部
			showBackTop(nVal, oVal) {
				// 当组件的显示与隐藏状态发生跳变时，修改组件的层级和不透明度
				// 让组件有显示和消失的动画效果，如果用v-if控制组件状态，将无设置动画效果
				if (nVal) {
					this.opacity = 1;
				} else {
					this.opacity = 0;
				}
			},
		},
		methods: {
			// 返回顶部
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			jump(item, id) {
				if (item == '/pages/index/index' || item.indexOf('/pages/gospeed/index') != -1 || item ==
					'/pages/sixty/index' ||
					item == '/pages/user-center/user-center' || item == '/pages/store/mine/mine') {
					uni.redirectTo({
						url: item
					})
					return;
				}
				uni.navigateTo({
					url: item
				})
			},
			nljump() {
				if (this.$store.state.user.accessToken === '' || this.$store.state.user.accessToken === null) {
					this.$store.dispatch('user/accessToken');
				} else {
					uni.navigateTo({
						url: '/pages/complaint/index'
					});
				}
			},
			isvideo(index) {
				this.curindex = index
				this.isvshow = true
			},
			closev() {
				this.isvshow = false
			},
			loadlist() {
				this.$request({
					url: this.$api.topic.list,
					data: {
						type: 5,
						limit: 2
					}
				}).then((res) => {
					this.videolist = res.data.list
				}).catch(err => {

				})
			},
			checkjudge(vid) {
				if (vid != '') {
					this.$request({
						url: this.$api.apply.store,
						data: {
							id: vid
						},
						method: 'get',
					}).then(res => {
						// this.storename = res.data.name
						if (res.data.mch_id != 0) {
							uni.redirectTo({
								url: '/pages/store/boutique/boutique?id=' + res.data.id +
									'&mch_id=' + res.data.mch_id
							})
						} else {
							this.store_info = res.data
						}
					}).catch(e => {

					})
				} else {
					this.storename = '双熙堂珠宝店'
				}
			},
			judgeApply(vid) {
				if (vid != null) {
					this.$request({
						url: this.$api.apply.store,
						data: {
							id: vid
						},
						method: 'get',
					}).then(res => {
						this.store_info = res.data
						if (res.data.is_delete == 0) {
							if (res.data.review_status == 0) {
								uni.redirectTo({
									url: '/pages/bepartner/apply/apply'
								})
								this.status = 0
								// this.undreview = true
							} else if (res.data.review_status == 1) {
								this.status = 1
								this.stname = res.data.name
								if (this.store_info.mch_id != 0) {
									uni.redirectTo({
										url: '/pages/store/boutique/boutique?id=' + this.store_info.id +
											'&mch_id=' + this.store_info.mch_id
									})
								} else {
									this.stodetail(vid)
									this.navsReq()
									this.loadlist()
									this.request()
								}
							} else if (res.data.review_status == 2) {
								uni.redirectTo({
									url: '/pages/bepartner/apply/apply'
								})

								this.status = 2
								// this.failed = true
							} else if (res.data.review_status == 3) {
								if (this.store_info.mch_id == 0) {
									uni.redirectTo({
										url: '/pages/bepartner/apply/apply'
									})

									this.status = 3
								} else {
									// this.status = 1
									uni.redirectTo({
										url: '/pages/store/boutique/boutique?id=' + this.store_info.id +
											'&mch_id=' + this.store_info.mch_id
									})
								}

								// this.failed = true
							}
						} else {
							uni.redirectTo({
								url: '/pages/bepartner/apply/apply'
							})

							this.status = 3
						}
						// console.log(res);
					}).catch(e => {

					})
				} else {
					uni.redirectTo({
						url: '/pages/bepartner/apply/apply'
					})
					// this.notapply = true
				}
			},
			stodetail(id) {
				this.$request({
					url: this.$api.apply.detail,
					data: {
						id: id
					},
				}).then(res => {
					this.islate = res.data.isLate
					this.storeuser = res.data.detail.user
					if (res.data.detail.description != null) {
						this.description = res.data.detail.description.replaceAll('<p>', '').replaceAll('</p>', '')
					}
					this.storettile = res.data.detail.name + '的珠宝店'
					uni.setNavigationBarTitle({
						title: this.storettile
					})

					if (res.data.isLate != 0) {
						this.latedown = true
						this.namedown = '珠宝店即将过期'
						// this.contentdown = '珠宝店还有' + (90-res.data.lateday) + '天过期'
						this.contentdown = '珠宝店目前已经' + res.data.lateday + '天没有收入'
					}
				}).catch()
			},
			navsReq() {
				this.$request({
					url: this.$api.navs.index,
				}).then((res) => {
					if (res.code === 0) {
						this.pageList = res.data.list
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(() => {

				})
			},
			// 请求页面数据
			async request(status) {
				const res = await this.$request({
					url: this.$api.navs.blend,
					data: {
						// pids: '22,47,52,58',
						// 10.15
						pids: '52,58,2172,2173',
						page: this.page,
						limit: this.limit
					}
				});
				if (res.code === 0) {
					this.page_count = res.data.pagination.page_count;
					this.total_count = res.data.pagination.total_count;
					this.blendList = this.blendList.concat(res.data.list.flat())
					this.blendList = this.blendList.filter(function(el) {
						return el.length !== 0;
					});
					this.$storage.setStorageSync('indexLoop', this.blendList)

					uni.stopPullDownRefresh()
				} else {
					uni.showModal({
						title: '提示',
						content: res.msg,
					})
				}
			},
			getOption() {
				const self = this;
				self.$request({
					url: self.$api.mch.setting,
				}).then(info => {
					if (info.code === 0) {
						self.is_service = info.data.setting.is_service;
					}
				})
			},

			loadShop() {
				const self = this;

				self.$showLoading();
				self.$request({
					url: self.$api.mch.detail,
					data: {
						id: self.mch_id
					}
				}).then(info => {
					self.$hideLoading();
					if (info.code === 0) {
						[self.detail, self.mch_setting] = [info.data.detail, info.data.mchSetting];
						/* uni.setNavigationBarTitle({
							title: self.detail.store.name + '的店铺',
						}); */
					}
				}).catch(info => {
					self.$hideLoading();
				})
			},

			addVisit() {
				const self = this;
				self.$request({
					url: self.$api.mch.visit,
					method: "POST",
					data: {
						mch_id: self.mch_id
					}
				}).then(info => {})
			},

			getGoods: function() {
				const self = this;
				self.$showLoading();
				self.$request({
					url: self.$api.mch.goods,
					data: {
						page: 1,
						mch_id: self.mch_id,
						sort: self.sort,
						sort_type: self.sort_type,
						mch_status: 2,
						cat_id: self.cat_id,
					}
				}).then(info => {
					self.$hideLoading();
					if (info.code === 0) {
						self.goods_list = info.data.list;
					}
				}).catch(info => {
					self.$hideLoading();
				})
			},
		},
		onPageScroll(e) {
			let self = this
			// 返回顶部
			self.scrollTop = e.scrollTop;
			var scrollTop = parseInt(e.scrollTop);
			if (self.isvshow == true) {
				if (scrollTop < self.vtotop) {
					self.isvshow = false
				} else {
					self.isvshow = true
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	// 10.26 弹窗
	.movable {
		position: fixed;
		top: 0;
		left: 0;
		pointer-events: none;
		z-index: 1001;
		width: 750rpx;
		height: 100%;

		.movable-item {
			pointer-events: auto;
			width: 200rpx;
			// height: 200rpx;
			height: 98rpx;
		}

		.quick {
			width: 200rpx;
			// height: 200rpx;
			height: 98rpx;
		}
	}

	// user
	.user-shop {
		position: relative;
		height: 416rpx;
		// background-image: url(https://ceshi.senmainet.com/web/uploads/mall1/20210324/51e720ff8e5835d84ad75fc546ff50d4.png);
		background-size: cover;
		background-repeat: no-repeat;
	}

	.grade {
		display: flex;
		// height: 50rpx;
		position: absolute;
		top: 48rpx;
		// left: 208rpx;
		left: 172rpx;
		color: #FFFFFF;
		font-size: 48rpx;
		align-items: center;
		font-weight: 600;

		.gimage {
			width: 96rpx;
			height: 96rpx;
		}

		.gtitle {}

		.gcon {
			font-size: 24rpx;
			font-weight: normal;
		}
	}

	.user-info {
		width: 686rpx;
		display: flex;
		color: #fff;
		height: 144rpx;
		position: absolute;
		top: 148rpx;
		left: 32rpx;
	}

	.user-info .nickname {
		padding-left: 32rpx;
		width: 416rpx;
	}

	.user-info .nickname .nick-nick {
		font-size: 44rpx;
		line-height: 68rpx;
		font-weight: bold;
	}

	.user-info .nickname .nick-shop {
		font-size: 24rpx;
		line-height: 36rpx;
		margin-top: 30rpx;
	}

	.user-info .complaint {
		width: 120rpx;
		font-size: 24rpx;
		line-height: 36rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.user-info .complaint image {
		width: 42rpx;
		height: 48rpx;
		margin-bottom: 12rpx;
		font-size: 24rpx;
	}

	.user-info .user-member-info {
		margin-top: 16rpx;
		font-size: 20rpx;
	}

	.user-info .avatar {
		height: 144rpx;
		width: 144rpx;
		border-radius: 50%;
		border: 2rpx solid #fff;
	}

	.spe-note {
		width: 100%;
		color: #fff;
		font-size: 26rpx;
		text-align: center;
		position: absolute;
		top: 318rpx;
		left: 0;
		font-weight: bold;
	}

	.sxt-intro {
		width: 100%;
		color: #fff;
		font-size: 36rpx;
		text-align: center;
		position: absolute;
		top: 356rpx;
		left: 0;
		font-weight: 300;
	}

	.activity {
		width: 686rpx;
		margin: 0 auto;
		height: 396rpx;
		display: flex;
		justify-content: space-between;

		.assemble {
			width: 332rpx;
			height: 100%;

			.swiper {
				height: 100%;

				.slide-image {
					height: 100%;
				}
			}

			/* #ifdef MP-WEIXIN */
			.wx-swiper-dot {
				width: 20rpx;
				height: 4rpx;
				border-radius: 2rpx;

				margin-left: -6rpx;

				&.wx-swiper-dot-active {
					width: 40rpx;
				}
			}

			.wx-swiper-dots.wx-swiper-dots-horizontal {
				margin-bottom: 5rpx;
			}

			/* #endif */
		}

		.listR {
			width: 332rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.listRt {
				height: 188rpx;
				position: relative;

				.slide-image {
					width: 100%;
					height: 100%;
				}
			}

			.subject-play {
				// position: absolute;
				// width: 68rpx;
				// height: 68rpx;
				// top: 50%;
				// left: 50%;
				// transform: translate(-50%, -50%);
				position: absolute;
				width: 32rpx;
				height: 32rpx;
				top: 8rpx;
				right: 8rpx;
			}
		}
	}

	.close {
		position: fixed;
		top: #{26upx};
		right: #{26upx};
		width: #{70upx};
		height: #{70upx};
		z-index: 1606;
		border-radius: #{35upx};
		background-color: rgba(51, 51, 51, .4);

		.image {
			width: #{26upx};
			height: #{26upx};
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}

	/* 成为双熙堂合伙人 */
	.partner {
		width: 686rpx;
		margin: 20rpx auto;
		// background: linear-gradient(180deg, #EDD5D5 0%, #C8C8C8 100%);
		border-radius: 32rpx;
		// height: 192rpx;
		overflow: hidden;
	}

	.partner-url {
		width: 100%;
		height: 100%;
	}

	.partner .image {
		width: 100%;
		height: 100%;
	}

	/* 实体店直播，好货快快抢 */
	.beseparate {
		width: 686rpx;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.besebutton:nth-child(2n-1) .besepone .besepdec {
		color: #FE4C4B
	}

	.besebutton:nth-child(2n) .besepone .besepdec {
		color: #F2994A
	}

	.besepone {
		position: relative;
		// padding: 24rpx 24rpx 32rpx 36rpx;
		width: 328rpx;
		// height: 230rpx;
		height: 460rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		overflow: hidden;

		.image {
			width: 328rpx;
			height: 460rpx;
		}
	}

	.besepimage {
		position: absolute;
		bottom: 12rpx;
		right: 24rpx;
		height: 152rpx;
		width: 132rpx
	}


	.besepimage .image {
		height: 100%;
		width: 100%;
	}

	.beseptitle {
		font-weight: bold;
		font-size: 36rpx;
		line-height: 48rpx;
		color: #333;
	}

	.besepdec {
		font-size: 28rpx;
		line-height: 132%;
		font-weight: 500;
	}

	.beseplaying {
		background: linear-gradient(90deg, #FD6E60 0%, #FE4C4B 100%);
		border-radius: 22rpx;
		width: 140rpx;
		height: 40rpx;
		overflow: hidden;
		margin-top: 50rpx;
		padding: 6rpx 20rpx;
		display: flex;
		align-items: center;
	}

	.beseplaying .image {
		height: 28rpx;
		width: 28rpx;
	}

	.beseplaying .text {
		color: #FFFFFF;
		font-size: 22rpx;
		margin-left: 4rpx;
	}

	/* 今日推荐 */
	.today {
		width: 686rpx;
		margin: 20rpx auto;
		background: #342B2A;
		box-shadow: 0px 30px 60px rgba(57, 57, 57, 0.1);
		border-radius: 32rpx;
		display: flex;
		align-items: center;

		.image {
			width: 100%;
			height: 100%;
		}
	}

	.today .icon {
		width: 168rpx;
		height: 160rpx;
		padding-left: 40rpx;
	}

	.today .icon .image {
		width: 100%;
		height: 100%;
	}

	.today .text {
		width: 356rpx;
		text-align: center;
	}

	.today .text .title {
		color: #FFFFFF;
		font-weight: 900;
		font-size: 48rpx;
		line-height: 84rpx;
	}

	.today .text .dec {
		color: #CD9C62;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	/* 今日爆款，猜你喜欢 */
	.betseparate {
		width: 686rpx;
		margin: 20rpx 32rpx;
		display: flex;
		justify-content: space-between;
	}

	.beseptwo {
		width: 328rpx;
		height: 136rpx;
		padding: 20rpx;
		position: relative;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.beseptwo:nth-child(2n-1) .betsepfont .circle {
		background: #F08519;
	}

	.beseptwo:nth-child(2n) .betsepfont .circle {
		background: #FF3B30;
	}

	.beseptwo:nth-child(2n-1) .betsep {
		color: #F08519;
	}

	.beseptwo:nth-child(2n) .betsep {
		color: #FF3B30;
	}

	.betsepfont {
		font-weight: bold;
		font-size: 36rpx;
		line-height: 54rpx;
		color: #333333;
	}

	.betsepfont .circle {
		display: inline-block;
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		position: relative;
		left: 14px;
		top: 2px;
	}

	.betsepfont .circle image {
		position: absolute;
		top: 50%;
		left: 56%;
		transform: translate(-50%, -50%);
		width: 8rpx;
		height: 16rpx;
	}

	.betsep {
		font-size: 24rpx;
		line-height: 48rpx;
	}

	/* 猜你喜欢，APP端口 */
	.bepartner {
		width: 686rpx;
		margin: 32rpx;
		display: flex;
		justify-content: space-between;
	}

	.bepartnerone {
		width: 328rpx;
		height: 400rpx;
		position: relative;
		background: #FFFFFF;
		border-radius: 16rpx;
		overflow: hidden;

		.swiper {
			width: 328rpx;
			height: 328rpx;
		}

		.image {
			width: 328rpx;
			height: 328rpx;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.title {
			height: 72rpx;
			line-height: 36rpx;
			padding: 10rpx 16rpx;
			color: rgba($color: #000000, $alpha: 0.84);
			font-size: 24rpx;
		}
	}

	/* 循环 */
	.beloop {
		// width: 686rpx;
		margin: 32rpx auto 12rpx;
		position: relative;
		/* display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap; */
	}

	.belooprow {
		position: absolute;
		top: 0;
		left: 0;
		margin-bottom: 32rpx;
		width: 350rpx;
		// height: 454rpx;
		background: #FFFFFF;
		box-shadow: 0px 30rpx 60rpx rgba(57, 57, 57, 0.1);
		border-radius: 16rpx;
		overflow: hidden;
	}

	.belooprow .image {
		width: 100%;
		height: 470rpx;
	}

	.belooprow .image .img {
		width: 100%;
		height: 100%;
	}

	.belooprow .title {
		margin: 8rpx 14rpx 24rpx;
		font-size: 12px;
		line-height: 18px;
		color: rgba(0, 0, 0, 0.84);
	}

	/* 资料提交成功 */
	.sub {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 666;
	}

	.subsuc {
		width: 586rpx;
		height: 566rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #fff;
		box-shadow: 0px 8rpx 16rpx rgba(0, 0, 0, 0.1);
		border-radius: 32rpx;

		.submit-look {
			position: absolute;
			width: 368rpx;
			text-align: center;
			bottom: 24rpx;
			left: 50%;
			transform: translate(-50%, 0);
			font-size: 24rpx;
			color: #6c6c6c;
		}
	}

	.subimgs {
		width: 240rpx;
		height: 240rpx;
		position: absolute;
		left: 174rpx;
	}

	.subimgone {
		top: -96rpx;
	}

	.subimgtwo {
		top: 62rpx;
	}

	.subimage {
		width: 240rpx;
		height: 240rpx;
	}

	.subdatasuc {
		font-size: 36rpx;
		line-height: 54rpx;
		text-align: center;
		color: #000;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.subdataone {
		top: 208rpx;
	}

	.subdatatwo {
		top: 326rpx;
	}

	.subdatati {
		font-size: 28rpx;
		line-height: 42rpx;
		text-align: center;
		color: #666;
		position: absolute;
		top: 262rpx;
		left: 150rpx;
	}

	.submittwo {
		position: absolute;
		width: 368rpx;
		height: 96rpx;
		left: 110rpx;
		top: 404rpx;
		background: #342B2A;
		box-shadow: 0px 8rpx 46rpx rgba(0, 0, 0, 0.1);
		border-radius: 64rpx;
		text-align: center;
		line-height: 96rpx;
		color: #fff;
	}

	// 返回顶部
	.quick-box {
		position: fixed;
		bottom: #{40rpx};
		right: #{48rpx};
		z-index: 100;
		transition: opacity 0.4s;
	}

	.quick-btn {
		width: #{80rpx};
		height: #{80rpx};
		margin-top: #{32rpx};
	}
</style>
